<template>
  <div>
    <van-nav-bar title="商品订单" left-arrow @click-left="$router.push('/home')"/>

    <!-- 搜索 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      show-action
    >
      <template #action>
        <div style="color: #003399">搜索</div>
      </template>
    </van-search>

    <!-- 暂无消息 -->
      <div class="img" v-show="AllorderData.length == 0">
      <img src="../assets/images/暂无消息.png" width="200px" alt="" />
      <div>暂无消息</div>
    </div>
    <!-- 导航 -->
    <van-tabs v-model="active">
      <van-tab title="全部"><AllGoods :AllorderData="AllorderData" /></van-tab>
      <van-tab title="待发货"><AllGoods :AllorderData="Sendgoods" /></van-tab>
      <van-tab title="待收货"><AllGoods :AllorderData="Delivery" /></van-tab>
      <van-tab title="待评价"><AllGoods :AllorderData="unAssess" /></van-tab>
    </van-tabs>
  </div>
</template>

<script>

import AllGoods from "../components/GoodsDescribe/AllGoods";

import { Allorder, Sendgoods, Delivery, unAssess } from "../request/api";

export default {
  data() {
    return {
      // 搜索
      value: "",
      active: 0,
      AllorderData: [],
      Sendgoods: [],
      Delivery: [],
      unAssess: [],
    };
  },

  components: {
    AllGoods,
    
  },
  created() {
   
    let token = localStorage.getItem("token");
    Allorder(
      {
        "x-auth-token":token
      }
    ).then((res) => {
      // console.log(res);
      this.AllorderData = res.data.records;
    });

    Sendgoods({
      "x-auth-token":token
    }).then((res) => {
      // console.log(res);
        this.Sendgoods = res.data.records;
      
    });

    // 待收货
    Delivery({ "x-auth-token":token }).then((res) => {
      this.Delivery = res.data.records;
      // console.log(this.Delivery);
    });

    // 待评价
    unAssess({"x-auth-token":token}).then((res) => {
      // console.log(res);
      this.unAssess=res.data.records;
    });

    
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
}
/deep/.van-tabs {
  .van-tabs__line {
    background-color: #fad157;
  }
  .van-tab--active {
    color: #003399;
  }

  .van-tab::before {
    content: "";
    width: 1px;
    height: 20px;
    background-color: #e5e5e5;
    position: absolute;
    right: 0px;
    top: 12px;
  }

  .van-tab {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;

    &:nth-of-type(4) {
      &::before {
        background-color: transparent;
      }
    }
  }
}
.img {
  width: 201px;
  height: 181px;
  margin: 150px auto;
  text-align: center;
  color: #ccc;
}
</style>

